<!-- 可预约时段查询 -->
<template>
  <div class="ky-container">
    <el-card shadow="hover" class="ky-card ky-card-hdbg">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true" class="ky-form-inline ky-form-inline-sm" label-width="83px">
        <el-form-item label="医院名称:" prop="hospitalCode">
          <el-select size="small" class="param-type_input" filterable v-model="formData.hospitalCode" placeholder="请选择">
            <el-option
              v-for="(item,index) in mx_hospitalList"
              :key="index"
              :label="item.name"
              :value="item.code"
              @change="hospitalChange"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="影像区域:">
          <el-select size="small" class="param-type_input" v-model="formData.depArea" multiple placeholder="请选择" clearable collapse-tags>
            <el-option
              v-for="(item,index) in depAreaOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查部门:">
          <el-select size="small" class="param-type_input" v-model="formData.dep" multiple placeholder="请选择" clearable collapse-tags>
            <el-option
              v-for="(item,index) in depOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查设备:">
          <el-select size="small" class="param-type_input" v-model="formData.modality" multiple placeholder="请选择" clearable collapse-tags>
            <el-option
              v-for="(item,index) in modalityOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查机房:">
          <el-select size="small" class="param-type_input" v-model="formData.checkRoom" multiple placeholder="请选择" clearable collapse-tags>
            <el-option
              v-for="(item,index) in checkRoomOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查班次:">
          <el-select size="small" class="param-type_input" v-model="formData.checkClass" multiple placeholder="请选择" clearable collapse-tags>
            <el-option
              v-for="(item,index) in checkClassOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预约状态:">
          <el-select size="small" class="param-type_input" v-model="formData.appointmentStatus" placeholder="请选择">
            <el-option
              v-for="(item,index) in appointmentStatusOptions"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预约日期:" prop="appointmentDate">
          <el-date-picker
            v-model="formData.appointmentDate"
            align="right"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            :clearable="false">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button class="m-l-0" size="small" @click="resetParam" plain>重置</el-button>
          <el-button type="primary" class="m-l-0" size="small" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="hover" class="ky-card ky-card-hdbg ky-mt10">
      <div class="content-title">可预约时段查询</div>
      <el-table
        ref="table"
        v-loading="loading"
        size="medium"
        :data="tableData"
        style="width: 100%"
        border
        class="ky-table"
      >
        <el-table-column align="left" prop="hospital" label="医院"></el-table-column>
        <el-table-column align="left" prop="depArea" label="影像分布"></el-table-column>
        <el-table-column align="left" prop="department" label="科室"></el-table-column>
        <el-table-column align="left" prop="inspectionDepartments" label="检查部门"></el-table-column>
        <el-table-column align="left" prop="computerRoom" label="机房"></el-table-column>
        <el-table-column align="left" prop="modality" label="检查设备"></el-table-column>
        <el-table-column align="left" prop="flightTime" label="班次时间" class-name="flightTime" width="174">
          <template slot="header">
            <div class="flightTime-header">
              <div class="flightTime-header-class">班次时间</div>
              <div class="flightTime-header-count">数量</div>
            </div>
          </template>
          <template slot-scope="scope">
            <div v-for="(value,key) in scope.row.flightTime" :key="key" class="flightBox">
              <div class="flightBox-0">{{key}}</div>
              <div class="flightBox-1">
                <div v-for="(item,index) in value" :key="index" class="flightBox-1-li">
                  <div class="flightBox-1-li-time">{{item.time}}</div>
                  <div class="flightBox-1-li-count">{{item.count}}</div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column align="left" prop="count" label="数量"></el-table-column> -->
        <el-table-column align="left" prop="filterConditions" label="过滤条件"></el-table-column>
        <el-table-column align="left" prop="appointableItems" label="可预约项目"></el-table-column>
        <el-table-column align="left" prop="channel" label="渠道"></el-table-column>
      </el-table>
      <paginationCont
        :total="totalCount"
        :page.sync="currentPage"
        :limit.sync="pageSize"
        @pagination="changePagination"
      />
    </el-card>
  </div>
</template>

<script>
import { getAppointmentRecordsInfoPages, getDepAreaList, getDepList, getModalityList, getCheckRoomList } from '@/api/api.js'
import paginationCont from '@/components/Pagination/index'
import { operateTypeFlr } from '@/utils/validate'
export default {
  name: '',
  mixins: [],
  components: { paginationCont },
  filters: {
    operateTypeFlr
  },
  data() {
    return {
      rules: {
        hospitalCode: { required: true, message: '请选择医院', trigger: 'change' },
        appointmentDate: { required: true, message: '请选择预约日期', trigger: 'change' }
      },
      formData: {
        hospitalCode: this.$store.state.user.hospitalCode,
        depArea: [],
        dep: [],
        checkClass: [],
        appointmentStatus: '正常预约',
        checkRoom: [],
        modality: [],
        appointmentDate: ''
      },
      depAreaOptions: [],
      checkClassOptions: ['上午', '下午', '晚上'],
      inspectionDepartmentOptions: [],
      depOptions: [],
      appointmentStatusOptions: ['暂停预约', '节假日', '正常预约', '设备故障', '计划排班'],
      checkRoomOptions: [],
      modalityOptions: [],
      loading: false,
      tableData: [
        {
          hospital: '北京大学第一医院',
          depArea: '本院',
          department: '影像科',
          inspectionDepartments: '超声检查',
          computerRoom: 'B超1',
          modality: '超声',
          flightTime: {
            '上午': [
              {
                time: '08:00-08:30',
                count: 23
              },
              {
                time: '08:30-09:00',
                count: 11
              },
              {
                time: '09:30-10:00',
                count: 11
              }
            ],
            '下午': [
              {
                time: '13:00-13:30',
                count: 33
              },
              {
                time: '13:30-14:00',
                count: 22
              },
              {
                time: '14:00-14:30',
                count: 22
              }
            ]
          },
          count: '56',
          filterConditions: '男，40岁',
          appointableItems: '胸部，下腹部',
          channel: '微信'
        }
        /*  {
          hospital: '北京大学第一医院',
          depArea: '本院',
          department: '影像科',
          inspectionDepartments: '超声检查',
          computerRoom: 'B超1',
          modality: '超声',
          flightTime: '08:30-09:00',
          count: '56',
          filterConditions: '男，40岁',
          appointableItems: '胸部，下腹部',
          channel: '微信'
        } */
      ],
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  watch: {},
  computed: {},
  created() {
  },
  mounted() {
    this.$getHospitalList()
    this.formData.hospitalCode = this.$store.state.user.hospitalCode
    this.getDepAreaOptions()
    this.getDepOptions()
    this.getModalityOptions()
    this.getCheckRoomOptions()
  },
  methods: {
    frtTime(row, column, cellValue, index) {
      // 处理后台时间
      let time = ''
      if (cellValue) {
        time = cellValue.slice(0, 10)
      }
      return time
    },
    resetParam() {
      // 重置
      this.formData = {
        hospitalCode: this.$store.state.user.hospitalCode,
        depArea: [],
        dep: [],
        checkClass: [],
        appointmentStatus: '正常预约',
        checkRoom: [],
        modality: [],
        appointmentDate: ''
      }
    //   this.search()
    },
    search() {
      // 查询
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.currentPage = 1
          this.fetchData()
        }
      })
    },
    changePagination() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.fetchData()
        }
      })
    },
    fetchData() {
      this.loading = true
      let data = {
        ...this.formData,
        modality: this.formData.modality.join(','),
        computerName: this.formData.computerName.join(','),
        checkStatus: this.formData.checkStatus.join(','),
        appointmentSource: this.formData.appointmentSource.join(','),
        pageSize: this.pageSize, // 页面大小
        pageNumber: this.currentPage // 页码
      }
      getAppointmentRecordsInfoPages(data).then(res => {
        this.loading = false
        if (res && res.code === 10000) {
          this.tableData = res.content.list
          this.totalCount = res.content.totalCount
        }
      }).catch(() => {
        this.loading = false
      })
    },
    getDepAreaOptions() {
      let params = {
        hospitalCode: this.formData.hospitalCode
      }
      getDepAreaList(params).then(res => {
        if (res.code === 10000) {
          this.depAreaOptions = res.content.list
        }
      })
    },
    getDepOptions() {
      let params = {
        hospitalCode: this.formData.hospitalCode,
        depArea: this.formData.depArea.join(',')
      }
      getDepList(params).then(res => {
        if (res.code === 10000) {
          this.depOptions = res.content.list
        }
      })
    },
    getModalityOptions() {
      let params = {
        hospitalCode: this.formData.hospitalCode,
        depArea: this.formData.depArea.join(','),
        dep: this.formData.dep.join(',')
      }
      getModalityList(params).then(res => {
        if (res.code === 10000) {
          this.modalityOptions = res.content.list
        }
      })
    },
    getCheckRoomOptions() {
      let params = {
        hospitalCode: this.formData.hospitalCode,
        depArea: this.formData.depArea.join(','),
        dep: this.formData.dep.join(','),
        modality: this.formData.modality.join(',')
      }
      getCheckRoomList(params).then(res => {
        if (res.code === 10000) {
          this.checkRoomOptions = res.content.list
        }
      })
    },
    hospitalChange(val) {
      this.getDepAreaOptions()
      this.getDepOptions()
      this.getModalityOptions()
      this.getCheckRoomOptions()
      this.formData.depArea = []
      this.formData.checkClass = []
      this.formData.checkRoom = []
      this.formData.modality = []
    }
  },
  beforeDestroy() {},
  destroyed() {},
  beforeUpdate() {},
  updated() {}
}
</script>
<style lang='scss' scoped>
.ky-container{
    .content-title{
        margin-left:4px;
        margin-bottom: 16px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
    }
    .click-button{
        width: 125px;
    }
}
.ky-form-inline-sm .el-form-item .el-date-editor--daterange.el-input__inner{
    width: 458px;
}
.ky-form-inline-sm .el-form-item /deep/ .el-input__inner{
    width: 180px;
}
.ky-form-inline-sm .el-form-item{
    margin-right: 22px;
}
.el-date-editor.el-input{
    width:auto;
}
.el-table{
    /deep/ .flightTime{
        padding: 0px;
        .cell{
            padding: 0px;
        }
        .flightTime-header{
            width:100%;
            display:flex;
            .flightTime-header-class{
                width:135px;
                border-right:1px solid #EBEEF5;
                text-align: center;
                padding: 5px 0;
            }
            .flightTime-header-count{
                width:calc(100% - 135px);
                text-align: center;
                padding: 5px 0;
            }
        }
    }
}
.el-table--border th{
    padding: 0px;
}
.flightBox{
    display: flex;
    border-bottom: 1px solid #EBEEF5;
    .flightBox-0{
        border-right: 1px solid #EBEEF5;
        padding: 10px;
        width: 35px;
    }
    .flightBox-1{
        width: calc(100% - 35px);
        .flightBox-1-li{
            width: 100%;
            display: flex;
            .flightBox-1-li-time{
                width: 100px;
                border-right: 1px solid #EBEEF5;
                border-bottom: 1px solid #EBEEF5;
                text-align: center;
            }
            .flightBox-1-li-count{
                width: calc(100% - 100px);
                text-align: center;
                border-bottom: 1px solid #EBEEF5;
            }
        }
    }
}
</style>
